<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="数据统计" left-arrow fixed @click-left="onClickLeft" />
        <div class="profit_core">
            <div class="profit_core_title">
                <div>数据查询统计</div>
            </div>
            <div class="profit_core_search">
                <van-field class="field_input" label="" placeholder="选择店铺" v-model="store" readonly right-icon="arrow-down" @click="storeShow=true"/>
                <van-field  class="field_input" label="" placeholder="选择日期" v-model="days" readonly @click="dayShow=true">
                    <template #right-icon>
					<img style="width: .32rem;" class="arrow-icon" src="../../../images/mine/day.png" >
				</template>
                </van-field>
                <div class="profit_core_amt" >
                    <div class="profit_core_amt_list">
                    <div>{{amountList.today_order || 0}}</div>
                    <div>订单数统计</div>
                </div>
                <div class="profit_core_amt_list">
                    <div>{{amountList.today_amount || 0}}</div>
                    <div>营业额统计</div>
                </div>

                <div class="profit_core_amt_list">
                    <div>{{amountList.today_income || 0}}</div>
                    <div>收益统计</div>
                </div>
            </div>
            </div>

        </div>
        <div>
            <!-- ({{total_count}}) -->
            <div class="profit_core_title1">店铺查询列表</div>
            <div>
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="order_all" v-for="item,index in shopList" :key="index" :title="item">
                        <div class="order_name_return">
                            <div class="order_name_left">{{item.name}}</div>
                            <div class="balance_amt">{{item.region_name}}</div>
                        </div>
                        <div class="ectension_list">
                            <div class="ectension_list_item">
                                <div>{{item.today_order}}</div>
                                <div class="ectension_list_item_title">订单数统计</div>
                            </div>
                            <div class="ectension_list_item">
                                <div>{{item.today_amount}}</div>
                                <div class="ectension_list_item_title">营业额统计</div>
                            </div>
                            <div class="ectension_list_item">
                                <div>{{item.today_income}}</div>
                                <div class="ectension_list_item_title">收益统计</div>
                            </div>
                            <!-- <div class="ectension_list_item">
                                <div>{{item.history_income}}</div>
                                <div class="ectension_list_item_title">总计收益</div>
                            </div> -->
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
        <van-popup v-model="storeShow" position="bottom" :style="{ height: '30%' }">
            <van-picker title="店铺" :value="store_id" show-toolbar value-key="name"
                :columns="columns" @confirm="onConfirm" @cancel="storeShow=false" />
        </van-popup>
        <!-- <van-popup v-model="dayShow" position="bottom" :style="{ height: '30%' }"> -->
            <van-calendar       :min-date="minDate"
            :max-date="maxDate" :style="{ height: '55%' }" v-model="dayShow" type="range" @confirm="onConfirmDay" />
        <!-- </van-popup> -->
    </div>
</template>
<script>
import {DATA_STATISTICS} from '@/api/mine'
import {parseTime} from '@/tool/methods'
export default{

    data() {
        const today = new Date();
    const threeMonthsAgo = new Date();
    threeMonthsAgo.setMonth(today.getMonth() - 3); // 当前日期向前推三个月
        return {
            minDate: threeMonthsAgo, // 最小日期为三个月前
            maxDate: today, // 最大日期为今天
            finished:false,
            loading:false,
            amountList:{},
            page:1,
            pageSize:20,
            shopList:[],
            total_count:0,
            level_name:this.$route.query.level_name,
            days:'选择日期',
            store:'全部店铺',
            storeShow:false,
            store_id:0,
            columns:[],
            dayShow:false,
            amountListPage:{}
        }
    },
    mounted() {
    window.scrollTo(0, 0)
        //
        this.columns=JSON.parse(localStorage.getItem('amountList'))
        this.amountListPage=JSON.parse(localStorage.getItem('amountListPage'))
        // this.shopListData()
    },
    methods: {
        // 金额统计接口
        // shopListData(){
        //     this.$http.get(SHOP_DATA).then(res=>{
        //     this.amountList=res.data
        // })
        // },
        onClickLeft() {
            this.$router.back()
        },
        // 店铺
        onConfirm(val){
            console.log(val);
            this.store=val.name
            this.store_id=val.id
            this.storeShow=false
            this.page=1
            this.shopList=[]
            this.onLoad()
        },
        // 日期
        onConfirmDay(val){
            console.log(parseTime(val[0], '{y}-{m}-{d}'));
            console.log(parseTime(val[1], '{y}-{m}-{d}'));
            this.days=parseTime(val[0], '{y}-{m}-{d}')+'~'+parseTime(val[1], '{y}-{m}-{d}')
            this.dayShow=false
            this.page=1
            this.shopList=[]
            this.onLoad()
        },
        onLoad() {
                let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				params['store_id'] = this.store_id;
				params['date_range'] = this.days=='选择日期'?'':this.days;
                params['key']=this.amountListPage.key
                params['region_code']=this.amountListPage.region_code
                this.$http.get(DATA_STATISTICS, {params:params})
				.then(res => {
				  const {
				    list
				  } = res.data;
                  this.total_count=res.data.pages.total_count
				  if(list && list.length) {
				     this.page++;
                     this.amountList=res.data.statistics
				     this.shopList = this.shopList.concat(list);

				     // 加载状态结束
				     this.loading = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
    },
    },
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: calc(100vh - 46px);
    padding-top: 46px;
    background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.profit_core_title1 {
    width: 95%;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: .28rem;
    color: #333333;
    // line-height: 18px;
    text-align: left;
    font-style: normal;
    padding-top: .32rem;
}

.profit_core {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    box-sizing: border-box;
    border-radius: 0.2rem;
    // border: 0.01rem solid #999;
    background: url("../../../images/mine/img_yue.png") no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;

    .profit_core_title {
        font-size: .28rem;
        display: flex;
        justify-content: space-between;
        // margin-bottom: 0.38rem;
        padding: 0.24rem 0;

        div:first-child {
            width: 2.54rem;
            height: .52rem;
            line-height: .52rem;
            // background: #FFFFFF;
            // border-radius: 0px 100px 100px 0px;
            color: #fff;
            text-align: center;
            // padding-left: 0.2rem;
        }

        // div:last-child{
        //     padding-right: 0.32rem;
        //     line-height: .52rem;
        // }
    }
    .profit_core_search{
        border-radius: .16rem;
        background: #fff;
        color: #333;
        padding-top: .23rem;
        .field_input{
            width: 90%;
            margin: 0 auto;
            background: #F4F4F4;
            border-radius: 6px;
            margin-top: .2rem;
            padding: .1rem .32rem;
        }
    }
    .profit_core_amt {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: .23rem;
        .after {
            position: relative;

            &::after {
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                content: '';
                height: 0.5rem;
                width: 1px;
                background: rgba(255, 255, 255, 0.2);
            }
        }

        .profit_core_amt_list {
            width: 30%;
            text-align: center;
            margin-bottom: 0.2rem;
            line-height: 0.6rem;
            font-size: 0.24rem;
            color: #666666;
            div:first-child{
                font-size: .32rem;
                color: #333;
            }
        }
    }

}

.order_all {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // border: 0.01rem solid #999;
    border-radius: 0.16rem;
    background: #fff;

    .order_name_return {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem;
        padding-bottom: 0;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        .order_name_left {
            width:48%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-weight: bold;
        }

        .balance_amt {
            // margin-top: 0.3rem;
            // font-weight: bold;
            width:48%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            text-align: right;
            font-size: 0.24rem;
            font-family: PingFangSC, PingFang SC;
            color: #666;
        }

        // &_right {
        //     font-size: 0.25rem;
        // }
    }

    .ectension_list {
        padding: 0.32rem;
        // padding-top: 0.2rem;
        display: flex;
        justify-content: space-between;

        .ectension_list_item {
            width: 25%;
            text-align: center;
            font-size: 0.28rem;
            line-height: 0.6rem;
            .ectension_list_item_title{
                font-size: .24rem;
                color: #666;
            }
        }
    }
}
</style>
